<template>
  <view class="container"  :class="'theme-'+theme">
    <view class="addTitle">
      <view class="titleDetail">
        <view class="titleLeft" >
			<image src="../../static/newh5/fanhui.png"
			class="yticon"
			style="width: 13px;height: 20px;color:black"
			@click="returnIndex()"
			></image>
        </view>
        <view class="titleCenter" >
          <b class="titleText">发货详情</b>
        </view>
        <view class="titleRight"  style="color: #269cd3;flex:1" > </view>
      </view>
    </view>
    <view class="content">
      <empty v-if="aftersaleData.length === 0"></empty>

<!--  发货信息    -->
      <view class="exp" style="margin-top: 10px">
        <view class="list-flex" style="display: flex">
          <view class="title-list">发货信息</view>
        </view>
		<view class="line-flex">
			<view class="list-flex" v-if="aftersaleData.isSupplierSplit">
				<text style="color:#909090">供应商子订单号：{{aftersaleData.thirdOrderSn}}</text>
			</view>
		</view>
        <view class="line-list">
          <view class="list-flex">
            发货方式:
<!--            <text style="margin-left: 10px">{{aftersaleData.type==='1'?'退':'换'}}货</text>-->
            <text style="margin-left: 10px">{{typeDatas[aftersaleData.deliveryType]}}</text>
          </view>
        </view>
        <view class="line-list">
          <view class="list-flex">
            状态:
            <view class="price-box" >
              <text style="margin-left: 10px" v-if="aftersaleData.isConfirmReceipt===false">待确认收货</text>
              <text style="margin-left: 10px" v-if="aftersaleData.isConfirmReceipt===true">已确认收货</text>
              <text v-if="aftersaleData.deliveredState==true">
                (已妥投)
              </text>

            </view>
          </view>
        </view>
      </view>
      <view class="product-list">
        <view style="height:40px;display: flex;align-items: center;background-color: #FFFFFF; padding: 20rpx;  ">
          <view class="list-flex">
            <view class="title-lists">发货商品</view>
          </view>
        </view>
        <view class="item"
        v-for="(citem,cindex) in aftersaleData.detailList" :key="cindex"
         @click="goProductDetail(citem.orderItem.productId)">

          <view class="left">
            <image :src="citem.orderItem.thumbnail"></image>
          </view>
          <view class="right">
            <view class="name">
              <text>{{citem.orderItem.productName}}</text>
            </view>

            <view class="bottom" style="justify-content: flex-end">
              <view class="num">
                <text>数量：{{citem.num}} {{citem.orderItem.unit}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="exp">
        <view class="list-flex" style="display: flex">
          <view class="title-list">物流信息</view>
          <!--          <text style="font-size: 12px;color: #999;line-height: 20px;margin-left: 5px">(该地址是供应商上门取旧商品的地址)</text>-->
        </view>
        <view class="line-list">
          <view>物流公司
            <text style="margin-left: 10px">{{aftersaleData.name}}</text>
          </view>
        </view>
        <view class="line-list">
          <view style="display: flex">物流单号
            <text style="margin-left: 10px">{{aftersaleData.sn}}</text>
            <copyButton :content="aftersaleData.sn"></copyButton>
          </view>
        </view>
        <view class="line-list" v-if="aftersaleData.trackList&&aftersaleData.trackList.length>0">
          <view class="list-flex">
			  物流详情
			<view style="margin-left: 10px;flex:1">
<!--                          <uni-steps :options="[{title:'买家下单',desc:'2018-11-11'},{title:'卖家发货',desc:'2018-11-12'},{title:'买家签收',desc:'2018-11-13'},{title:'交易完成',desc:'2018-11-14'}]" direction="column" :active="2"></uni-steps>-->
            <view class="cgr-infos">
              <view class="row" >
                <m-steps v-for="(item, index) in aftersaleData.trackList" :item='item' :key="index" :index='index' :activity= 'activity' date='operateTime'  >
                  <text slot="status">{{progressStatus[item.progressStatus]}}</text>
                </m-steps>

              </view>
            </view>
            <view class="showHide" style="" @click.stop="isShowGood()">
              <view class="radio">
                <text>{{show?'收起':'展示完整信息'}}</text>
                <u-icon name="arrow-down" style="color: #909090;"></u-icon>
              </view>
            </view>
          </view>
          </view>
        </view>
      </view>

    </view>

    <view class="action-sections">

      <button class="action-btns themeTextColor themeBorderColor" v-if="aftersaleData.isConfirmReceipt==false" @click="clickConfirm(aftersaleData)">确认收货</button>
    </view>
  </view>
</template>

<script>
import {  goback } from "@/common/utils/navigateBack.js";
import copyButton from '../../components/copy.vue'
import mSteps from '@/components/m-steps/m-steps.vue'
import {
  getAftersaleData,
  getAftersaleState,
  getDict,
  confirmReceipt
} from '@/api/order/order.js';
import { dictService } from '@/common/utils/api.js'
import {getLogistics} from "../../api/aftersale/aftersale";
export default {
  components: {
    mSteps,
    copyButton
  },
  data() {
    return {
      activity: 0,
      wrapRecordList: [
        {updateTime: '2020-11-19 17:04:36',progressStatus: '4', content: '已到达目的地，本次服务结束！',isActive:false},
        {updateTime: '2020-11-19 17:04:36',progressStatus: '3',content: '终于到家啦，回去睡觉！',isActive:true},
        {updateTime: '2020-11-19 17:04:36',progressStatus: '2',content: '还有一半路程马上结束啦，换人来开！',isActive:true},
        {updateTime: '2020-11-19 17:04:36',progressStatus: '1',content: '准备出发啦！一路顺风！',isActive:true},
        {updateTime: '2020-11-19 17:04:36',progressStatus: '0',content: '开始啦',isActive:true},
      ],
      progressStatus: ['开始','准备出发','到达服务区', '到达目的地', '已送达'], // 0 开始， 1 准备出发 2 到达中转站 3 送往目的地 4 已送达
      type:'center',
      aftersaleData: {
        reason: 1
      },
      show:false,
      stateList: [],
      shouhuoType:'',
      dictMap: {
        RETURN_REASON: [{
          name: ''
        }],
        SALE_AFTER_STATUS:[{
          name: ''
        }],
        SALE_AFTER_TYPE:[{
          name:''
        }],
        DELIVERY_TYPE:[{
          name: ''
        }]
      },
      status: '',
      statusData: {},
      companyData: {},
      saleDatas:{},
      reasonDatas:{},
      typeDatas:{},
      returnList: [{
        id: '3',
        title: "待采购人发货"
      },
        {
          id: '4',
          title: "待供应商确认收货"
        }
      ],
      exchangeList: [{
        id: '3',
        title: "待采购人发货"
      },
        {
          id: '4',
          title: "待供应商确认收货"
        },
        {
          id: '8',
          title: "待供应商发货"
        },
        {
          id: '9',
          title: "待收货"
        }
      ]
    }
  },
  onLoad(op) {
    // console.log('传值',op)
    // console.log('传值',op.item)
    let useData=JSON.parse(op.item)
    console.log('useData',useData);
    this.aftersaleData=useData
    console.log('this.after',this.aftersaleData)
    // this.aftersaleData.trackList.reverse()
	if(this.aftersaleData.trackList&&this.aftersaleData.trackList.length>0){
		this.aftersaleData.originalTrackList = this.aftersaleData.trackList
		this.aftersaleData.trackList = this.aftersaleData.trackList.slice(0,1)
	}
    console.log('this.aftersaleData.trackList',this.aftersaleData.trackList)
    // this.getData(op.sn);
    this.getDictData()
    dictService(this, ['DELIVERY_TYPE','SALE_AFTER_TYPE','SALE_AFTER_STATUS','LOGISTICS_COMPANY'])
    // this.status
    // this.getStateData(op.sn)
  },
  methods: {
    //跳转页面
			returnIndex() {
				goback()
			},
    // 确认收货
    clickConfirm(item) {
      console.log('item',item)
      uni.showModal({
        title: '提示',
        content: '请确认是否已收到货？',
        confirmColor: '#00B48D',
        success: suc => {
          if (suc.confirm) {
            confirmReceipt({
              id: item.orderId,
							outgoingSn: item.outgoingSn
            }).then(res => {
              if (res.code === 0) {
                this.$util.msg('确认收货成功!')
              //  uni.navigateBack()
                uni.navigateTo({
                  url: '/pages/deliver/deliverLogistic?item='+item.newid
                })
              } else {
                this.$util.msg(res.message)
              }
            })
          }
        }
      })
    },
    // 开启弹窗
    openPopup(item, type) {
      // this.curOrder = item;
      this.service('center', type)
    },
    service(type, open) {
      this.type = type;
      this.$nextTick(() => {
        this.$refs['show' + open].open();
      })
    },
    // 关闭弹窗
    close(type) {
      this.$refs['show' + type].close();
      // this.curOrder={}
      // this.cancelReason=''
    },
    //控制商品盒子的显示隐藏
    isShowGood(){
      this.show = !this.show
      if (this.show){
		  this.aftersaleData.trackList = this.aftersaleData.originalTrackList
      }else{
		this.aftersaleData.trackList.splice(1,this.aftersaleData.trackList.length)
      }
    },
    getData(sn) {
      console.log('初始化的方法')
      sn='2020082010006926'
      getAftersaleData({
        sn: sn
      }).then(res => {
        console.log('data----------------',res)
        if (res.code === 0) {
          this.aftersaleData = res.data
          this.aftersaleData.reason = parseInt(this.aftersaleData.reason)
          console.log('data----------------',this.aftersaleData.type)
          console.log('data----------------',this.aftersaleData.reason)
          // this.aftersaleData.type = parseInt(this.aftersaleData.type)
        } else {
          this.$util.msg(res.message)
        }
      })

      // getLogistics({
      //   sn:sn
      // }).then(res => {
      //   console.log('物流',res)
      //
      // })
    },
    getStateData(sn) {
      getAftersaleState({
        sn: sn
      }).then(res => {
        console.log('售后单流转状态',res)
        if (res.code === 0) {
          this.stateList = res.data

          let wait = this.aftersaleData.revertWay === '1' ? "待供应商上门服务" : "待供应商确认收货";
          this.returnList[1].title = wait;
          this.exchangeList[1].title = wait;
          let cancelList = this.stateList.filter(sale => {
            //取消的标识
            return sale.type == '6' || sale.type == '7' || sale.type == '11';
          })
          if (cancelList.length > 0) {
            let cancel = cancelList[0];
            if (cancel.type == '6') {
              this.status = "供应商取消"
            } else if (cancel.type == '7') {
              this.status = "采购取消"
            } else if (cancel.type == '11') {
              this.status = "提交失败"
              return;
            }
            return;
          }

          if (this.stateList.length === 1) {
            this.status = '待供应商确认'
          } else {
            let aType = this.aftersaleData.type
            if (this.stateList[this.stateList.length - 1].type === '5') {
              if (aType === '1')
                this.status = '退货完成'
              else
                this.status = '换货完成'
              return;
            }
            if (aType === '1') {
              // 退货
              this.status = this.returnList[this.stateList.length - 1].title
            } else {
              // 换货
              this.status = this.exchangeList[this.stateList.length - 1].title
            }
          }
        } else {
          this.$util.msg(res.message)
        }
      })
    },
    getDictData() {
      const param = {
        data: '["SALE_AFTER_TYPE", "SALE_AFTER_REVERT_WAY", "RETURN_REASON", "LOGISTICS_COMPANY", "SALE_AFTER_NEED_REPORT","SALE_AFTER_HAS_PACKAGE","SALE_AFTER_PACKAGE_DESC","DELIVERY_TYPE","SALE_AFTER_STATUS"]'
      }
      getDict(param).then(res => {
        console.log('dictMap',res)

        if (res.code === 0) {
          this.dictMap = res.data
          //订单状态
          this.dictMap.SALE_AFTER_STATUS.forEach(item => {
            this.$set(this.statusData,item.code ,item.name);
          })
          //快递公司
          this.dictMap.LOGISTICS_COMPANY.forEach(item => {
            // this.companyData[item.code] = item.name
            this.$set(this.companyData,item.code ,item.name);
          })
          //售后类型
          this.dictMap.SALE_AFTER_TYPE.forEach(item => {
            // this.saleDatas[item.code]=item.name
            this.$set(this.saleDatas,item.code ,item.name);
          })
          // 售后原因
          this.dictMap.RETURN_REASON.forEach(item => {
            // this.reasonDatas[item.code]=item.name
            this.$set(this.reasonDatas,item.code ,item.name);
          })
          // 发货方式
          this.dictMap.DELIVERY_TYPE.forEach(item => {
            this.$set(this.typeDatas,item.code ,item.name);
            // this.reasonDatas[item.code]=item.name
            // this.$set(this.reasonDatas,item.code ,item.name);
          })

        } else {
          this.$util.msg(res.message)
        }
        // this.shouhuoType=this.dictMap.SALE_AFTER_TYPE[aftersaleData.type-1].name
        console.log('statusData',this.statusData)
        console.log('dictMap',this.dictMap.RETURN_REASON)
        console.log('dictMap2',this.dictMap.SALE_AFTER_STATUS)
        console.log('dictMap3',this.dictMap.LOGISTICS_COMPANY)
        console.log('dictMap4',this.dictMap.SALE_AFTER_TYPE)
        console.log('发货方式',this.dictMap.DELIVERY_TYPE)
      })
    },
    goProductDetail(id) {
      uni.navigateTo({
        url: `/pages/product/product?id=${id}`
      })
    },
    toOrderDetail(id) {
      uni.navigateTo({
        url: `/pages/order/detail?id=${id}`
      })
    },
    //查看新商品发货物流
    showLogistic(id){
      uni.navigateTo({
        url: `/pages/deliver/detail?id=${id}`
      })
    }
  }
}
</script>

<style lang="scss">
@import '@/common/css/uni.css';
page,
.container {
  background-color: $my-bg-color-grey;
  .my-navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 88rpx;
    padding: 0 30rpx;
    font-size: $my-font-size-lg;
    border-bottom: 1px solid $my-border-color;
    background-color: $my-bg-color;
    position: fixed;
    left: 0;
    top: calc(var(--window-top) + var(--status-bar-height));
    z-index: 10;
    background: $my-bg-color;

    image {
      position: absolute;
      left: 30rpx;
      width: 28rpx;
      height: 40rpx;
    }
  }

  .content {
    font-size: $page-color-base;

    .line {
      display: flex;
      align-items: center;
      height: 60rpx;
      //border-bottom: 1px solid $my-border-color-grey;
      padding: 0 20rpx;
      color: $my-text-color-grey;
      background-color: $my-bg-color;

      &.remark {
        word-break: break-all;
        // height: auto;
        padding: 30rpx;
        display: flex;

        .left {
          display: flex;
          align-items: center;
          // width: 16%;
          // width: 66px;
        }

        .right {
          flex: 1;
        }
      }

      &>.detail {
        color: $my-text-color-active;
      }

      .status {
        margin: auto;
        margin-right: 0;
        color: $my-bg-color-red;
      }

      .link {
        margin: auto;
        margin-right: 0;
        color: $font-color-spec;
      }
    }

    .cgr-info {
      padding: 20rpx 30rpx;
      //border: 1px solid red;
      min-height: 150rpx;
      line-height: 55rpx;
      margin: 16rpx 0;
      //border-top: 1px solid $my-border-color-grey;
      //border-bottom: 1px solid $my-border-color-grey;
      background-color: $my-bg-color;

      .tel {
        margin-left: 30rpx;
      }

      .address {
        line-height: 18px;
        color: $my-text-color-grey;
      }
    }

 /*   .cgr-infos {
      //padding: 20rpx 30rpx;
      //min-height: 150rpx;
      //line-height: 55rpx;
      //margin: 16rpx 0;
      //border-top: 1px solid $my-border-color-grey;
      //border-bottom: 1px solid $my-border-color-grey;
      background-color: $my-bg-color;

      .tels {
        margin-left: 30rpx;
      }

      .addresss {
        line-height: 18px;
        color: $my-text-color-grey;
      }
    }*/

    .product-list {
      padding: 20rpx;
      //margin: 20rpx;
      //border-top: 1px solid $my-border-color-grey;
      //border-bottom: 1px solid $my-border-color-grey;

      .item {
        height: 220rpx;
        display: flex;
        border-bottom: 1px solid $my-border-color-grey;
        background-color: $my-bg-color;
        padding: 20rpx 20rpx;

        &:last-child {
          border-bottom: none;
        }

        .left {
          width: 200rpx;
          height: 160rpx;
          margin-right: 20rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .right {
          width: 550rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .name {
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            line-height: 40rpx;
            max-height: 80rpx;
            word-break: break-all;
          }

          .price {
            color: $my-text-color-red;
            line-height: 32rpx;
          }

          .bottom {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .num {
              margin-top: 20rpx;
              margin-right: 20rpx;
              font-size: 13px;
            }
          }

        }
      }
    }

    .total {
      height: 200rpx;
      margin-top: 16rpx;
      padding: 20rpx 30rpx;
      background-color: $my-bg-color;

      .total-l {
        height: 52rpx;
        display: flex;
        align-items: center;

        .l-p {
          margin: auto;
          margin-right: 0;
          color: $my-text-color-red;
        }
      }

      .time {
        width: 100%;
        text-align: right;
        color: $my-text-color-grey;
      }
    }
  }
}

.title-lists {
  font-weight: bold;
  // padding: 20rpx;
  padding-bottom: 10rpx;
  color: #000;
  font-size: 15px;

  //&::after {
  //  margin-left: 4rpx;
  //  content: '*';
  //  color: $base-color;
  //  font-size: 14px;
  //}
}
.exp {
  margin-top: 50px;
  margin: 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  padding: 20rpx;

  .title-list {
    font-weight: bold;
    // padding: 20rpx;
    padding-bottom: 10rpx;
    color: #000;
    font-size: 15px;

    //&::after {
    //  margin-left: 4rpx;
    //  content: '*';
    //  color: $base-color;
    //  font-size: 14px;
    //}
  }

  .content {
    border: 1px solid #00C777;
    background: $page-color-base;
    height: 100%;
    margin-top: 20rpx;
    //background: #f9f9f9;
    min-height: 140rpx;
    //height: 140rpx;
    width: 100%;
    // margin: 20rpx;
    max-height: 200rpx;
    border-radius: 10rpx;
    padding: 20rpx;
    color: #303133;
    font-size: 14px;
    // border: 1px solid #d9d9d9;
  }

  .ph {
    font-size: 13px;
    color: #999;
  }
}
.showHide{
  display: flex;
  background-color: $my-bg-color;
  justify-content: center;
  .radio{
	  padding: 4rpx 6rpx;
	  font-size: 22rpx;
    border-radius: 5px ;
    border: 1px solid #b2b2b2;
  }

}

.cgr-info {
  padding: 20rpx 30rpx;
  min-height: 150rpx;
  line-height: 55rpx;
  margin: 16rpx 0;
  //border-top: 1px solid $my-border-color-grey;
  //border-bottom: 1px solid $my-border-color-grey;
  background-color: $my-bg-color;

  .row {
    padding: 10rpx 0;
  }
  .tel {
    margin-left: 30rpx;
  }

  .address {
    line-height: 18px;
    color: $my-text-color-grey;
  }
}

.line-list {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  //height: 50rpx;
  //border-bottom: 1px solid $my-border-color-grey;
  //padding: 0 0rpx;
  color: $my-text-color-grey;
  background-color: $my-bg-color;

  &.remark {
    word-break: break-all;
    // height: auto;
    padding: 30rpx;
    display: flex;

    .left {
      display: flex;
      align-items: center;
      // width: 16%;
      // width: 66px;
    }

    .right {
      flex: 1;
    }
  }

  &>.detail {
    color: $my-text-color-active;
  }

  .status {
    //margin: auto;
    //margin-right: 0;
    color: $my-bg-color-red;
  }

  .link {
    margin: auto;
    //margin-right: 0;
    color: $font-color-spec;
  }
}

.list-flex{
  display: flex;
}
.action-sections {
  /* #ifdef H5 */
  /*margin-bottom: 100upx;*/
  /* #endif */
  position: fixed;
  right: 20upx;
  bottom: 10upx;
  float: right;
  z-index: 95;
  display: flex;
  align-items: center;
  //width: 690upx;
  height: 100upx;
  padding: 0 30upx;
  background: rgba(255, 255, 255, 0.1);
  /*box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);*/
  border-radius: 16upx;
  .action-btns {
    width: fit-content;
    min-width: 150upx;
    height: 60upx;
    display: inline-table;
    margin: 0;
    margin-top: 10upx;
    margin-bottom: 10upx;
    margin-left: 20upx;
    padding: 0 10upx 0 10px;
    text-align: center;
    line-height: 60upx;
    font-size: $font-sm + 2upx;
    // color: $font-color-dark;
    background: #fff;
    border-radius: 100px;

    &:after {
      border-radius: 100px;
    }

    &.recom {
      background: #ffffff;
      color: $base-color;

      &:after {
        border-color: $base-color;
      }
    }
  }
}
</style>
